<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Client Side Pagination in TreeGrid - jQuery EasyUI Demo</title>
  <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
  <link rel="stylesheet" type="text/css" href="./css/demo.css">
  <script type="text/javascript" src="../easyui/jquery.min.js"></script>
  <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>

</head>
<body>
<h2>Client Side Pagination in TreeGrid</h2>
<p>This sample shows how to implement client side pagination in TreeGrid.</p>
<div style="margin:20px 0;"></div>
<table id="tg" title="Client Side Pagination" style="width:700px;height:250px"
       data-options="
				iconCls: 'icon-ok',
				rownumbers: true,
				animate: true,
				collapsible: true,
				fitColumns: true,
				url: 'treegrid_data2.json',
				method: 'get',
				idField: 'id',
				treeField: 'name',
				pagination: true,
				pageSize: 2,
				pageList: [2,5,10]
			">
  <thead>
  <tr>
    <th data-options="field:'name',width:180">Task Name</th>
    <th data-options="field:'persons',width:60,align:'right'">Persons</th>
    <th data-options="field:'begin',width:80">Begin Date</th>
    <th data-options="field:'end',width:80">End Date</th>
    <th data-options="field:'progress',width:120,formatter:formatProgress">Progress</th>
  </tr>
  </thead>
</table>
<script type="text/javascript">
	(function($){
		function pagerFilter(data){
			if ($.isArray(data)){    // is array
				data = {
					total: data.length,
					rows: data
				}
			}
			var dg = $(this);
			var state = dg.data('treegrid');
			var opts = dg.treegrid('options');
			var pager = dg.treegrid('getPager');
			pager.pagination({
				onSelectPage:function(pageNum, pageSize){
					opts.pageNumber = pageNum;
					opts.pageSize = pageSize;
					pager.pagination('refresh',{
						pageNumber:pageNum,
						pageSize:pageSize
					});
					dg.treegrid('loadData',state.originalRows);
				}
			});
			if (!state.originalRows){
				state.originalRows = data.rows;
			}
			var topRows = [];
			var childRows = [];
			$.map(state.originalRows, function(row){
				row._parentId ? childRows.push(row) : topRows.push(row);
			});
			data.total = topRows.length;
			var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
			var end = start + parseInt(opts.pageSize);
			data.rows = $.extend(true,[],topRows.slice(start, end).concat(childRows));
			return data;
		}

		var appendMethod = $.fn.treegrid.methods.append;
		var loadDataMethod = $.fn.treegrid.methods.loadData;
		$.extend($.fn.treegrid.methods, {
			clientPaging: function(jq){
				return jq.each(function(){
					var state = $(this).data('treegrid');
					var opts = state.options;
					opts.loadFilter = pagerFilter;
					var onBeforeLoad = opts.onBeforeLoad;
					opts.onBeforeLoad = function(row,param){
						state.originalRows = null;
						onBeforeLoad.call(this, row, param);
					}
					$(this).treegrid('loadData', state.data);
					$(this).treegrid('reload');
				});
			},
			loadData: function(jq, data){
				jq.each(function(){
					$(this).data('treegrid').originalRows = null;
				});
				return loadDataMethod.call($.fn.treegrid.methods, jq, data);
			},
			append: function(jq, param){
				return jq.each(function(){
					var state = $(this).data('treegrid');
					if (state.options.loadFilter == pagerFilter){
						$.map(param.data, function(row){
							row._parentId = row._parentId || param.parent;
							state.originalRows.push(row);
						});
						$(this).treegrid('loadData', state.originalRows);
					} else {
						appendMethod.call($.fn.treegrid.methods, jq, param);
					}
				})
			}
		});

	})(jQuery);

	function formatProgress(value){
		if (value){
			var s = '<div style="width:100%;border:1px solid #ccc">' +
				'<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'
			'</div>';
			return s;
		} else {
			return '';
		}
	}

	$(function(){
		$('#tg').treegrid().treegrid('clientPaging');
	})
</script>
</body>
</html>
